<template>
  <Select
      :placeholder="placeholder ? placeholder : '请选择状态'"
      :multiple="multiple"
      v-model="id"
      @on-change="handleChange"
      :style="styles">
    <Option value="" v-show="showAll" label="全部" />
    <Option
        v-for="(code, index) in codes"
        :key="index"
        :label="code"
        :value="'' + index">
    </Option>
  </Select>
</template>

<script>
import code from '../api/code.js'

export default {
  props: {
    value: {
      default: null
    },
    placeholder: {
      default: null
    },
    multiple: {
      default: false
    },
    name: {
      default: null
    },
    showAll: {
      default: false
    },
    styles: {
      default: {width: '200px'}
    },
  },
  data() {
    return {
      id: this.value,
      codes: []
    }
  },

  watch: {
    value() {
      this.id = '' + this.value
    }
  },

  created() {
    code.get({name: this.name, isLoading: false}).then(ret => {
      this.codes = ret.data.data[this.name];
    })
    // 填充
    this.$nextTick(() => {
      this.id = '' + this.value;
    });
  },

  methods: {
    handleChange(value) {
      this.$emit("input", this.id)
    },
  }
}
</script>
